<template>
  <div class="bg-box no-padding">
    <div class="title">{{ plugin.t('create.client') }}</div>
    <t-input-adornment>
      <t-input v-model="data.client_name" @click="client.open()" readonly>
        <template #prefixIcon>
          <t-icon name="user" style="margin-right: 8px" />
        </template>
      </t-input>
      <template #append>
        <t-button theme="default" variant="text" @click="store.client({})">
          <template #icon>
            <t-icon name="delete" />
          </template>
        </t-button>
      </template>
    </t-input-adornment>
    <div class="info" style="height: 50px">
      <template v-if="data.client_data">
        <span class="wrap">
          <b>{{ data.client_data.tax}}</b>
        </span>
        <span class="wrap min">
          {{ data.client_data.address }}, {{ data.client_data.zip }} {{ data.client_data.area }} {{ data.client_data.city }}
        </span>
      </template>
    </div>
    <Client ref="client" @post="row => store.client(row)" />
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import store from './store'
  import Client from '@/plugin/client/components/search.vue'

  const plugin = index.plugin
  const client = ref(null)
  const data = store.data

</script>